<template>
	<dt-main-body v-model="labelPosition">
		<div class="location">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>
					<i class="iconfont icon-home"></i>
					管理中心
				</el-breadcrumb-item>
				<el-breadcrumb-item>账户管理</el-breadcrumb-item>
				<el-breadcrumb-item>修改密码</el-breadcrumb-item>
			</el-breadcrumb>
		</div>

		<div class="content-box">
			<el-form ref="editForm" :model="model" :rules="rules" :label-position="labelPosition" label-width="120px">
				<el-tabs v-model="activeName" type="card">
					<el-tab-pane label="修改密码" name="info">
						<div class="tab-content">
							<el-form-item prop="password" label="当前密码">
								<el-input show-password v-model="model.password" placeholder="必填，最少6位英文字母"></el-input>
							</el-form-item>
							<el-form-item prop="newPassword" label="新密码">
								<el-input show-password v-model="model.newPassword" placeholder="必填，最少6位英文字母"></el-input>
							</el-form-item>
							<el-form-item prop="confirmPassword" label="确认密码">
								<el-input show-password v-model="model.confirmPassword" placeholder="必填，最少6位英文字母"></el-input>
							</el-form-item>
						</div>
					</el-tab-pane>
				</el-tabs>
			</el-form>
		</div>
		
		<div class="footer-box">
			<div class="footer-btn">
				<el-button type="primary" @click="submitForm">确认保存</el-button>
				<el-button plain @click="$common.back()">返回上一页</el-button>
			</div>
		</div>
	</dt-main-body>
</template>

<script>
	export default {
		data() {
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入确认密码'));
				} else if (value !== this.model.newPassword) {
					callback(new Error('两次输入密码不一致'));
				} else {
					callback();
				}
			};
			return {
				activeName: 'info', //当前选项卡
				labelPosition: 'right', //表单对齐方式
				loading: false,
				model: {
					password: null,
					newPassword: null,
					confirmPassword: null
				},
				rules: {
					password: [
						{ required: true, message: '请输入当前登录密码', trigger: 'blur' },
						{ min: 6, max: 128, message: '密码长度在至少6位', trigger: 'blur' },
						{ pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/, message: '必须英文字母数字组合', trigger: 'blur' }
					],
					newPassword: [
						{ required: true, message: '请输入新密码', trigger: 'blur' },
						{ min: 6, max: 128, message: '密码长度在至少6位', trigger: 'blur' },
						{ pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/, message: '必须英文字母数字组合', trigger: 'blur' }
					],
					confirmPassword: [
						{ required: true, validator: validatePass, trigger: 'blur' },
					]
				}
			}
		},
		methods: {
			submitForm() {
				let _this = this; //当前页面
				//多个表单验证
				const f1 = new Promise((resolve, reject) => {
					_this.$refs['editForm'].validate((valid) => {
						if (valid) resolve()
					});
				});
				Promise.all([f1]).then(() => {
					_this.$api.request({
						method: 'put',
						url: '/account/admin/password',
						data: _this.model,
						successMsg: '修改密码已成功',
						beforeSend() {
							_this.loading = true
						},
						success: function (res) {
							_this.$refs['editForm'].resetFields();
						},
						complete() {
							_this.loading = false
						}
					});
				})
			},
		},
		created() {
			
		}
	}
</script>

<style lang="scss">
</style>